<template>
  <div class="consult-dep">
    <cp-nav-bar title="选择科室"></cp-nav-bar>
    <div class="consult-dep-wrap">
      <van-sidebar v-model="active">
        <van-sidebar-item :title="item.name" v-for="item in list" :key="item.id" />
      </van-sidebar>
      <div class="consult-dep-wrap-right">
        <div
          class="rigth-item"
          v-for="item in secondDepList"
          :key="item.id"
          @click="goToPage(item.id)"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { getDepAllRequest } from '@/services/patient'
import { useRouter } from 'vue-router'
import { useConsult } from '@/stores'

const active = ref(0)
const list = ref<any[]>([])
const router = useRouter()
const store = useConsult()

const getDepAll = async () => {
  const res = await getDepAllRequest()
  list.value = res.data
}
getDepAll()

// 二级科室数组
const secondDepList = computed(() => {
  // 这里ts会报错一个，因为数组里面通过变量去找某一项，会报索引签名
  // 遇到这个问题，直接在数组的中括号里面写 类型断言  as any
  // 下面会报错，原因是因为请求是异步的，list数组来返回之前，是一个空数组， [0] 就是undeinfed
  // return list.value[active as any]?.child
  return list.value[active.value as any]?.child
})

const goToPage = (id: string) => {
  store.setDepId(id)
  router.push('/consult/illness')
}
</script>

<style lang="scss">
:root {
  --van-sidebar-width: 120px;
}
</style>

<style lang="scss" scoped>
.consult-dep {
  &-wrap {
    display: flex;
    width: 100%;
    height: calc(100vh - 46px);
    &-right {
      flex: 1;
      // background-color: aquamarine;
      .rigth-item {
        color: var(--cp-tip);
        padding: 15px 0 15px 30px;
      }
    }
    .van-sidebar {
      // vant-ui 修改样式，可以和之前一样，直接改类名，里面修改样式
      // 还有一种方式，去修改css变量的值
      // width: 120px;
    }
  }
}
</style>
